<template>
  <div class="page-card report-on-duty">
    <div class="page-card-cnt">
      <a-row class="n-row-5" :gutter="[24, 24]" type="flex" justify="center" align="middle">
        <a-col
          :span="5"
          :md="6"
          :xl="5"
          :xxl="4"
          v-for="item in list"
          :key="item.id">
          <VueKeepRatio class="report-on-duty-card hover-shadow" :ratio="236 / 300">
            <div @click="toURL(item)">
              <div class="report-on-duty--img">
                <img :src="require(`@/assets/Image/icon/${item.icon}.png`)" width="100%" alt="">
              </div>
              <p v-html="item.title"></p>
            </div>
          </VueKeepRatio>

        </a-col>
        <!-- <a-col :span="5" :md="6" :xl="5" :xxl="4">
          <VueKeepRatio class="report-on-duty-card report-on-duty-card-add  hover-shadow" :ratio="236 / 300">
            <div>
              <div class="report-on-duty--img">
                <img :src="require(`@/assets/Image/icon/bb-5.png`)" width="100%" alt="">
              </div>
              <p >新增</p>
            </div>
          </VueKeepRatio>
        </a-col> -->
      </a-row>
    </div>
  </div>
</template>

<script>
import { getBeOnDuty } from '@/api/dutyTime';
export default {
  data() {
    return {
      list: [
        // {
        //   id: 1,
        //   title: '每日值班舆情<br>及处置情况一览表',
        //   icon: 'bb-1',
        //   path: '/semList'
        // },
        // {
        //   id: 2,
        //   title: '网民热点关注表',
        //   icon: 'bb-2',
        //   path: '/semList/wsrs'
        // },
        // {
        //   id: 3,
        //   title: '网上舆情信息表',
        //   icon: 'bb-3',
        //   path: '/semList'
        // },
        // {
        //   id: 4,
        //   title: '浙江省每周地市网<br>络舆情风险点报送表',
        //   icon: 'bb-4',
        //   path: '/semList/index1'
        // }
      ]
    };
  },
  created() {
    this.getBeOnDuty();
  },
  methods: {
    getBeOnDuty() {
      const icon = {
        '5831651651651248516': 1,
        '5838747468912348516': 2,
        '5838747468921223136': 3,
        '5838747468921323136': 4,
        '6838747468921123458': 5
      };
      getBeOnDuty().then(res => {
        console.log(res.data);
        this.list = res.data.map((e, i) => {
          const m = (i + 1) % 5 === 0 ? 5 : (i + 1) % 5;
          let url = '/semList';
          if (e.id == '5838747468912348516') { // 1
            url = '/semList/wsrs';
          } else if (e.id == '5838747468921223136') { // 2
            url = '/semList/index1';
          } else if (e.id == '6838747468921323136') { // 4
            url = '/semList/wsrs2';
          } else if (e.id == '6838747468921123458') { // 5
            url = '/semList/report';
          }
          return {
            title: e.name,
            icon: `bb-${icon[e.id] || m}`,
            id: e.id,
            path: url
          };
        }).filter(e => ![].includes(e.id));
        // '5838747468912348516', '6838747468921323136', '6838747468921123458'
      });
    },
    toURL({ path, id, title }) {
      this.$router.push({ path, query: { id, title } });
    }
  }
};
</script>
<style scoped>
.page-card {
    min-height: 82vh;
  }
</style>
<style lang="less">

  .report-on-duty-card  {
    min-width: 200px;
    // height: 300px;
    background: linear-gradient(-3deg, #658BF9, #1F3B8A);
    border-radius: 15px;
    &.report-on-duty-card-add {
      background: rgba(156, 180, 247, 1);
    }
    // padding: 48px 20px;
    .v-keep-ratio__box  {
      padding: 0 20px;
      display: flex;
      // align-items: center;
      flex-wrap: wrap;
      margin-top: 60px;
      >div {
        margin: 0 auto;
      }
      .report-on-duty--img {
        width: 90px;
        height: 100px;
        margin: 0 auto;
      }
      p {
        font-size: 18px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 1.8;
        text-align: center;
        margin-top: 20px;
        width: 100%;
      }
    }

  }
  .page-card-cnt {
      // width: 90%;
      margin: 0 auto;
    }
</style>
